<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover"
    />
    <link rel="stylesheet" href="style/reset.css" />
    <link rel="stylesheet" href="style/index.css" />
    <script src="js/rem.js"></script>
    <title>情报分析</title>
  </head>

  <body>
    <div id="app">
      <div class="main_title">
        <span class="mt_left">一、经营分析</span>
        <span class="mt_right">（统计为上周一 ～ 周日数据）</span>
      </div>
      <div class="main_list"></div>
      <div class="error_info">
        <div class="er_mli_title">5、上周异常指标</div>
        <div class="er_mid_title"><span>异常指标：</span><span>xxx</span></div>
        <div class="er_mid_title"><span>异常原因：</span><span>xxx</span></div>
      </div>
      <div class="safe_area"></div>
    </div>
  </body>
  <script>
    function onCollapsedClicked(event) {
      if(!event.target.parentElement.parentElement) return
      if (event.target.parentElement.parentElement.className.indexOf("hidden_table") > -1) {
        event.target.parentElement.parentElement.className = "ml_item";
        event.target.innerText = "折叠";
      } else {
        event.target.parentElement.parentElement.className += " hidden_table";
        event.target.innerText = "展开";
      }
    }
    // renderTableByTableData使用说明
    // listItems必须要传递，类型为{title:"",columns:[title:"",subTitle:"",dataIndex:"",width:""],data:[]}
    // 其中需要width需要根据需求设置对应的宽度，不设置默认宽度1.5rem
    function renderTableByTableData(listItems) {
      listItems.forEach((item, index) => {
        var ml_item = document.createElement("div");
        ml_item.className = "ml_item";
        var mli_title = document.createElement("div");
        var mli_title_left = document.createElement("div");
        var mli_subtitle = document.createElement("div");
        var mli_title_right = document.createElement("div");
        mli_title_left.innerText = item.title;
        mli_title.className = "mli_title";
        mli_title_left.className = "mli_title_left";
        mli_subtitle.innerText = item.subTitle || ''
        mli_subtitle.className = "mli_subtitle";
        mli_title_right.className = "mli_title_right";
        mli_title_right.innerText = "折叠";
        mli_title_right.onclick = onCollapsedClicked;
        mli_title.appendChild(mli_title_left);
        mli_title.appendChild(mli_title_right);
        item.subTitle && mli_title.appendChild(mli_subtitle);
        var mli_data = document.createElement("div");
        mli_data.className = "mli_data";
        var table = document.createElement("div");
        table.className = "my_table";
        const columns = item.columns;
        const thead = document.createElement("div");
        thead.className = "thead";
        columns.forEach((item) => {
          var cell = document.createElement("div");
          cell.innerText = item.title;
          cell.style.width = item.width + "px";
          thead.appendChild(cell);
        });
        table.appendChild(thead);
        item.data.forEach((item) => {
          var row = document.createElement("div");
          row.className = "table_content";
          columns.forEach((column) => {
            var cell = document.createElement("div");
            cell.textContent = item[column.dataIndex] || "-";
            cell.style.width = column.width + "px";
            row.appendChild(cell);
          });
          table.appendChild(row);
        });
        mli_data.appendChild(table);
        ml_item.appendChild(mli_title);
        ml_item.appendChild(mli_data);
        // // 将表格添加到HTML容器中
        var tableContainer = document.querySelector(".main_list");
        tableContainer.appendChild(ml_item);
      });
    }
    renderTableByTableData([
      {
        title: "1、上周主销细类",
        columns: [
          {
            title: "序号",
            dataIndex: "id",
            width: 100,
          },
          {
            title: "大类",
            dataIndex: "big_type",
            width: 150,
          },
          {
            title: "中类",
            dataIndex: "mid_type",
            width: 100,
          },
          {
            title: "小类",
            dataIndex: "small_type",
            width: 100,
          },
          {
            title: "细类",
            dataIndex: "thin_type",
            width: 270,
          },
        ],
        data: [
          {
            id: 1,
            big_type: "大类大类大类大类",
            mid_type: "中类中类",
            small_type: "小类",
            thin_type: "细类细类细类细类细类细类细类细类",
            main: "主力",
          },
          {
            id: 2,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 3,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 4,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 5,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
        ],
      },
    ]);
    renderTableByTableData([
      {
        title: "2、主销细类价格带分布",
        columns: [
          {
            title: "序号",
            dataIndex: "id",
            width: 100,
          },
          {
            title: "大类",
            dataIndex: "big_type",
            width: 150,
          },
          {
            title: "中类",
            dataIndex: "mid_type",
            width: 100,
          },
          {
            title: "小类",
            dataIndex: "small_type",
            width: 100,
          },
          {
            title: "细类",
            dataIndex: "thin_type",
            width: 270,
          },
          {
            title: "主力价格带",
            dataIndex: "main",
            width: 130,
          },
        ],
        data: [
          {
            id: 1,
            big_type: "大类大类大类大类",
            mid_type: "中类中类",
            small_type: "小类",
            thin_type: "细类细类细类细类细类细类细类细类",
            main: "主力",
          },
          {
            id: 2,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 3,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 4,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 5,
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
        ],
      },
    ]);
    renderTableByTableData([
      {
        title: "3、上周Top10商品",
        columns: [
          {
            title: "序号",
            dataIndex: "id",
            width: 100,
          },
          {
            title: "款号",
            dataIndex: "pid",
            width: 100,
          },
          {
            title: "商品名称",
            dataIndex: "name",
            width: 100,
          },
          {
            title: "大类",
            dataIndex: "big_type",
            width: 150,
          },
          {
            title: "中类",
            dataIndex: "mid_type",
            width: 100,
          },
          {
            title: "小类",
            dataIndex: "small_type",
            width: 100,
          },
          {
            title: "细类",
            dataIndex: "thin_type",
            width: 270,
          },
        ],
        data: [
          {
            id: 1,
            pid: 1,
            name: "商品名称",
            big_type: "大类大类大类大类",
            mid_type: "中类中类",
            small_type: "小类",
            thin_type: "细类细类细类细类细类细类细类细类",
            main: "主力",
          },
          {
            id: 2,
            pid: 2,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 3,
            pid: 3,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 4,
            pid: 4,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 5,
            pid: 5,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
        ],
      },
    ]);
    renderTableByTableData([
      {
        title: "4、上周0动销商品",
        columns: [
          {
            title: "序号",
            dataIndex: "id",
            width: 100,
          },
          {
            title: "款号",
            dataIndex: "pid",
            width: 100,
          },
          {
            title: "商品名称",
            dataIndex: "name",
            width: 100,
          },
          {
            title: "大类",
            dataIndex: "big_type",
            width: 150,
          },
          {
            title: "中类",
            dataIndex: "mid_type",
            width: 100,
          },
          {
            title: "小类",
            dataIndex: "small_type",
            width: 100,
          },
          {
            title: "细类",
            dataIndex: "thin_type",
            width: 270,
          },
        ],
        data: [
          {
            id: 1,
            pid: 1,
            name: "商品名称",
            big_type: "大类大类大类大类",
            mid_type: "中类中类",
            small_type: "小类",
            thin_type: "细类细类细类细类细类细类细类细类",
            main: "主力",
          },
          {
            id: 2,
            pid: 2,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 3,
            pid: 3,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 4,
            pid: 4,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
          {
            id: 5,
            pid: 5,
            name: "商品名称",
            big_type: "大类",
            mid_type: "中类",
            small_type: "小类",
            thin_type: "细类",
            main: "主力",
          },
        ],
      },
    ]);
  </script>
</html>
